<template>
	<view class="container" @refresh="handleRefresh">
		<view class="safe-area-top" />
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="back-btn" @tap="goBack">
				<text class="icon">←</text>
			</view>
			<text class="title">AI恋爱练习</text>
		</view>

		<!-- 阶段任务列表 -->
		<scroll-view scroll-y class="stage-scroll">
			<!-- 用户信息卡片 -->
			<view class="user-info">
				<!-- <image class="avatar" src="/static/avatar.png" mode="aspectFill"/> -->
				<image class="avatar" :src="user.avatar_url" mode="aspectFill"/>
				<view class="info">
					<text class="name">{{ user.name }}</text>
					<text class="age">{{ user.age }}岁</text>
					<view class="jobs">
						<text class="job">{{ user.occupation }}</text>
					</view>
					<view class="tags">
						<text class="tag">{{ user.mbti }}</text>
						<!-- <text class="tag">{{ user.character }}</text> -->
						<!-- <text class="tag">{{ user.personality }}</text> -->
					</view>
				</view>
			</view>
			<view class="page-content">
				<view class="page-desc">
					<text style="font-size: 33rpx; color: white;font-weight: 600;">关系发展阶段</text>
					<text
						style="font-size: 20rpx; color: gray; margin-top: 10rpx;font-size: 25rpx;">通过三大阶段，循序渐进地发展恋爱关系</text>
				</view>

				<view class="stage-list">
					<view class="stage" v-for="stage in stages" :key="stage.id">
						<!-- //接触期 -->
						<text class="stage-title">{{ stage.theme_name }}</text>
						<text class="state-title-desc" v-if="stage.theme_id===1">展示魅力，价值吸引，建立好感度</text>
						<text class="state-title-desc" v-if="stage.theme_id===2">增进了解，情感升温，确认心意</text>
						<text class="state-title-desc" v-if="stage.theme_id===3">建立关系，共同成长，维护感情</text>
						<view class="card-wrap">
							<view class="card" v-for="scene in stage.scenes" :key="scene.id">
								<view class="card-header">
									<!-- 初始相遇 -->
									<text class="card-name">{{ scene.scene_name }}</text>
									<text class="card-status" :class="scene.status" v-if="scene.status === 'completed'">已完成</text>
									<text class="card-status" :class="scene.status" v-if="scene.status === 'in_progress'">进行中</text>
									<text class="card-status" :class="scene.status" v-if="scene.status === 'not_started'">待开始</text>
								</view>
								<text class="card-desc">{{ scene.description }}</text>
								<view class="card-footer">
									<view class="footer-progress">
										<text class="footer-progress" :class="scene.status" v-if="scene.status === 'completed'">当前好感度100%</text>
										<text class="card-result" :class="scene.status" v-if="scene.status === 'completed'">已完成</text>
										<text class="footer-progress" :class="scene.status" v-if="scene.status === 'in_progress'">{{scene.completed_stages}}/{{scene.total_stages}}轮</text>
										<text class="card-result" :class="scene.status" v-if="scene.status === 'in_progress'" @tap="handleClickChat(scene.scene_id,scene.completed_stages)">继续聊天</text>
									</view>
								</view>
								<text class="card-action" v-if="scene.status === 'not_started'" @tap="handleClickChat(scene.scene_id,scene.completed_stages)">去聊天</text>
								<!-- <text class="card-lock" v-if="step.status === 'lock' || step.status==='not_started'" @tap="handleClickAd">广告解锁</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="progress-view">
				<view class="progress-bar">
					<view class="progress-fill" :style="{width: data.overall_completion_rate + '%'}"></view>
				</view>

				<view
					style="display: flex; flex-direction: row; align-items: center; gap: 10rpx;justify-content: center;">
					<button class="progress-percent"
						style="width: 100%; height: 60rpx; line-height: 60rpx; text-align: center;" @tap="handleClickResult">生产专属恋爱指南</button>
					<!-- <button class="share-btn" @tap="handleShare">
						<uni-icons type="share" size="26" color="#333" />
					</button> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	const characterId = ref(null)
	const user = ref({})
	const stages = ref([])
	const data = ref({})
	onLoad((options) => {
		characterId.value = options.id
		loadDetail()
	})

	function handleRefresh() {
		loadDetail()
		uni.showToast({ title: '界面已刷新' })
	}

	function goBack() {
		uni.navigateBack()
	}

	function handleClickResult(){
		if(data.value.overall_completion_rate<100){
			uni.showToast({
				title: '请先完成所有阶段',
				icon: 'none',
				duration: 2000
			})
			return
		}
		// uni.navigateTo({
		// 	url: `/pages/result/result?id=${characterId.value}`
		// })
	}

	function handleShare() {
		uni.share({
			title: `快来看看我的AI恋爱练习对象：${user.name}`,
			provider: 'weixin',
      		scene: 'WXSceneSession|WXSenceTimeline',
      		type: 0,
      		path: '/pages/detail/detail',
      		imageUrl: '/static/logo.png'
		})
	}

	async function loadDetail() {
		const res = await uni.request({
			url: `https://test.r.ads.sohu.com/api/v1/game/progress/1/${characterId.value}`,
			method: 'GET'
		})
		console.log('wgk:------111:   '+JSON.stringify(res.data))
		user.value = res.data.data.character
		stages.value = res.data.data.themes
		data.value = res.data.data
	}

	function handleClickChat(scene_id,index){
		// id :ai角色id
		// scene_id : 场景id
		console.log(characterId.value,scene_id,index)
		uni.navigateTo({
			url: `/pages/chat/chat?id=${characterId.value}&scene_id=${scene_id}&index=${index}`
		})
	}

	function handleClickAd(){
		uni.showToast({
			title: '功能待开放',
			icon: 'success',
			duration: 2000
		})
	}
	
</script>

<style lang="css" scoped>
	.custom-nav {
		position: relative;
	}

	.back-btn {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		padding: 10rpx;
	}

	.back-btn .icon {
		font-size: 36rpx;
		color: #fff;
	}

	.container {
		background-color: #141929;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.safe-area-top {
		/* padding-top: env(safe-area-inset-top); */
		height: 50px;
	}

	.custom-nav {
		height: 44px;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.title {
		text-align: center;
		font-size: 20px;
		color: #fff;
		padding: 20rpx 0;
		font-weight: bold;
	}

	.user-info {
		display: flex;
		align-items: center;
		background: #243142;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 25rpx;
		margin-right: 20rpx;
	}

	.info .name {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.info .age {
		font-size: 28rpx;
		color: #888;
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}

	.info .jobs {
		margin-bottom: 10rpx;
	}

	.job {
		font-size: 28rpx;
		color: white;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		width: 100%;
	}

	.tag {
		background: #f0f0f0;
		border-radius: 20rpx;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		color: #333;
	}


	.page-content{
		flex-direction: column;
		background-color: #243142;
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding-top: 20rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.page-desc {
		display: flex;
		margin-top: 30rpx;
		margin-left: 30rpx;
		flex-direction: column
	}

	.stage-scroll {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 30rpx;
	}

	.stage-list {
		margin-top: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
	}

	.stage {
		background-color:#333952;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.stage-title {
		font-size: 32rpx;
		font-weight: 600;
		color: pink;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}

	.state-title-desc {
		font-size: 26rpx;
		color: #888;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}

	.card-wrap {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}

	.card {
		background: #243142;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.footer-progress{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.footer-progress .completed{
		font-size: 26rpx;
		color: #fff;
		padding:15rpx 25rpx 15rpx 25rpx;
		color: palevioletred;
	}

	.footer-progress .in_progress{
		font-size: 26rpx;
		display: flex;
		color: #fff;
		padding:15rpx 25rpx 15rpx 25rpx;
	}
	.footer-progress .not_started{
		font-size: 26rpx;
		color: #fff;
		padding:15rpx 25rpx 15rpx 25rpx;
		background-color: #ff9500;
	}

	.card-time {
		font-size: 24rpx;
		color: #888;
	}

	.card-result {
		justify-content: center;
		font-size: 40rpx;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		color: #fff;
	}

	.card-action {
		display: flex;
		color: white;
		justify-content: center; /* 添加水平居中 */
		font-size: 30rpx; 
		background-color:palevioletred; 
		margin-top: 28rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 16rpx;
	}

	.card-lock {
		display: flex;
		color: white;
		justify-content: center; /* 添加水平居中 */
		font-size: 30rpx; 
		background-color: gray; 
		margin-top: 28rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 16rpx;
	}

	.card-result.completed {
		background: #4cd964;
		font-size: 30rpx;
		width: 40%;
		text-align: center;
		color: #fff;
	}

	.card-result.in_progress {
		display: flex;
		background: #007aff;
		font-size: 30rpx;
		width: 40%;
		color: #fff;
	}

	.card-result.not_started {
		background: #ff9500;
	}

	.card-result.lock{
		background-color: gray;
	}

	.card-name {
		font-size: 30rpx;
		color: white;
		font-weight: bold;
	}

	.card-status {
		font-size: 26rpx;
		padding: 12rpx;
		border-radius: 25rpx;
		color: #fff;
	}
	.card-status.completed {
		font-size: 26rpx;
		border-radius: 35rpx;
		color: #fff;
		padding:15rpx 25rpx 15rpx 25rpx;
		background-color: #4cd964;
		color: white;
	}
	
	.card-status.in_progress {
		font-size: 26rpx;
		border-radius: 35rpx;
		padding:15rpx 25rpx 15rpx 25rpx;
		background-color: #007aff;
		color: white;
	}
	
	.card-status.not_started {
		font-size: 26rpx;
		padding: 12rpx;
		align-items: center;
		border-radius: 35rpx;
		padding:15rpx 25rpx 15rpx 25rpx;
		background-color: palevioletred;
		color: white;
	}
	
	.card-desc {
		font-size: 26rpx;
		color: #666;
	}

	.progress-view {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
		padding: 20rpx 20rpx 30rpx 20rpx;
		background: #1c1c3c;
		border-radius: 16rpx;
	}

	.progress-bar {
		height: 16rpx;
		background: #333;
		border-radius: 8rpx;
		margin-top: 10rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(to right, #7a60ff, #a890fe);
		border-radius: 8rpx;
	}

	.progress-percent {
		font-size: 28rpx;
		height: 60rpx;
		color: white;
		text-align: center;
		background-color: palevioletred;
		border-radius: 16rpx;
		margin-top: 30rpx;
	}</style>